<template>
  <ul class="header-nav">
    <li :class="getClassObj(item.id)" v-for="item in headers" :key="item.id" @click="handleClick(item)">
      {{ item.name }}
    </li>
  </ul>
</template>
  
  <script setup lang="ts">
import { defineProps,ref,defineEmits } from "vue";

const headers = [
    {id: 405,name: "学院新闻"},
    {id: 406,name: "党建动态"},
    {id: 407,name: "通知公告"},
    {id: 408,name: "分院动态"},
]

// 选中的id
const selectId = ref(0);

defineProps({
  listData: {
    type: Array,
    required: true,
  },
});

const emits = defineEmits(["headChange"])

function getClassObj(id:any) {
    return {
        h2: true,
        active: selectId.value == id,
    }
}

function handleClick(item:any) {
    selectId.value = item.id;
    emits("headChange",item.id);
}
</script>
  
<style scoped lang="scss">
.header-nav {
  display: flex;

  & > .h2 {
    margin-right: 5px;
    font-weight: 600;
    color: #000;
  }

  & > .active {
    color: var(--base-color);
  }
}
</style>